<template>
  <div class="seckill">
    <div class="seckillBox" v-for="(v,index) in seckillarr" :key="index" @click="toTogether">
        <div class="seckillimg1">
            <h5>{{v.msgh}}</h5>
            <img :src="v.img1" alt="">
            <p>{{ v.msgp }}</p>
        </div>
        <div class="seckillimg2">
            <img :src="v.img2" alt="">
        </div>
    </div>
    <img class="bgc" src="https://gw.alicdn.com/imgextra/i4/O1CN01GRrTAV1C7c9I5ykhS_!!6000000000034-2-tps-714-368.png_q90.jpg_.webp" alt="">
  </div>
</template>

<script>

export default {
    data(){
        return{
            seckillarr:[
                { img1: "https://gw.alicdn.com/tps/O1CN01DM6ioT22YVYDAoxET_!!6000000007132-0-yinhe.jpg_140x140q90.jpg_.webp", img2:"https://gw.alicdn.com/tps/O1CN01WSpSTx1KVRo9MtISr_!!6000000001169-0-yinhe.jpg_180x180q90.jpg_.webp",msgh:"聚划算",msgp:"品牌折扣"},
                { img1: "https://gw.alicdn.com/tps/O1CN01yeTT0Q1sEDo3YYSFB_!!6000000005734-0-yinhe.jpg_140x140q90.jpg_.webp", img2: "https://gw.alicdn.com/tps/O1CN01axSNVz1LUorQBHYgo_!!6000000001303-0-yinhe.jpg_180x180q90.jpg_.webp", msgh: "天天特卖", msgp: "一元秒杀" },
                { img1: "https://gw.alicdn.com/tps/O1CN01kKFInE1SaV3a9Sl0s_!!6000000002263-0-yinhe.jpg_140x140q90.jpg_.webp", img2: "https://gw.alicdn.com/tps/O1CN013vqOzt1QtcIyYBVQw_!!6000000002034-0-yinhe.jpg_180x180q90.jpg_.webp", msgh: "有好货", msgp: "好口碑" },
                { img1: "https://gw.alicdn.com/tps/O1CN01qJRTAE25TsM4lej8O_!!6000000007528-0-yinhe.jpg_140x140q90.jpg_.webp", img2: "https://gw.alicdn.com/tps/O1CN01MnmyHY1XGPkFb8i52_!!6000000002896-0-yinhe.jpg_180x180q90.jpg_.webp", msgh: "每日好店", msgp: "头条" },
            ]
        }
    },
    methods:{
        toTogether(){
            this.$router.push("/TogetherPage")
            console.log("0.0");
        }
    },

}
</script>

<style scoped>
.seckill{
    width: 96%;
    height: 3.67rem;
    margin: 5px 2%;
    background: #fff;
    border-radius: 0.24rem;
    display: flex;
    overflow: auto;
    flex-wrap: wrap;
 }
.seckill .seckillBox{
    width: 50%;
    height: 50%;
    display: flex;


}
.seckill .seckillBox .seckillimg1{
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    /* align-items: center; */
}
.seckill .seckillBox .seckillimg1 img{
    width: 1.26rem;
    height: 1.26rem;
    margin-left: 10px;
}
.seckill .seckillBox .seckillimg2 {
    width: 55%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.seckill .seckillBox .seckillimg2 img{
    width: 1.6rem;
    height: 1.6rem;
}
h5{
    margin-left: 5px;
    text-align: left;
    font-size: .3rem;
    color: #111111;

}
.seckill .seckillBox .seckillimg1 p{
    display: block;
    color: #fff;
    border-radius: .04rem;
    padding: 0 0.06rem;
    font-size: .24rem;
    position: absolute;
}
.seckill .seckillBox:nth-child(1) .seckillimg1 p{
    background-color: #FF4200;
    top: .14rem;
    right: -0.55rem;
}
.seckill .seckillBox:nth-child(2)  .seckillimg1 p {
    background-color: #FF4200;
    top: .14rem;
    right: -0.85rem;
}

.seckill .seckillBox:nth-child(3) .seckillimg1 p {
    background-color: #0090EA;
    top: .14rem;
    right: -0.3rem;
}
.seckill .seckillBox:nth-child(4) .seckillimg1 p {
    background-color: #FF9711;
    top: .14rem;
    right: -0.4rem;
}
.bgc{
    width: 96%;
    height: 3.67rem;
    position: absolute;
    pointer-events: none;
}
</style>